<template>
  <div class="data-wrapper">
    <div class="header">
      <h1>{{ data.detail?.file_name }}</h1>
    </div>
    <div class="data-container">
      <div class="data-view">
        <el-scrollbar
          height="100%"
          style="min-width: 600px; width: 100%; overflow: auto"
        >
          <vue-office-docx
            :src="fileUrl"
            style="width: 100%; height: 100%"
            v-if="docx.indexOf(ext) >= 0"
          />
          <pdf-viewer
            v-if="pdf.indexOf(ext) >= 0"
            :pdf-url="fileUrl"
            style="width: 100%; height: 100%"
            :scale="1.2"
          />
        </el-scrollbar>
      </div>
      <div class="data-tab">
        <div class="tab-wrapper">
          <div
            class="tab-item"
            :class="activeId == item.id ? 'active' : ''"
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleChangeTab(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="render-component">
          <el-scrollbar height="100%" style="width: 100%">
            <component :is="renderComponent" :data="data"></component>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, defineAsyncComponent, shallowRef, reactive } from 'vue'
import { useRoute } from 'vue-router'
import AIChat from './AiChat.vue'
import SimilarRecommend from './Similar.vue'
import { httpDataDetail, httpKeywords } from '@/api/study'
const PdfViewer = defineAsyncComponent(
  () => import('@/components/PdfViewer/index.vue'),
)
const VueOfficeDocx = defineAsyncComponent(() => import('@vue-office/docx'))
const Abstract = defineAsyncComponent(() => import('./Abstract.vue'))
const Translate = defineAsyncComponent(() => import('./Translate.vue'))
// const SimilarRecommend = defineAsyncComponent(() => import('./Similar.vue'))

const componentMap = {
  1: Abstract,
  2: Translate,
  3: AIChat,
  4: SimilarRecommend,
}
const pdf = ['.pdf']
const docx = ['.docx']
const ext = ref()
const renderComponent = shallowRef(componentMap[1])
const route = useRoute()
const tabList = [
  { id: 1, name: '全文摘要' },
  // { id: 2, name: '全文翻译' },
  { id: 3, name: 'AI解答' },
  { id: 4, name: '相似知识推荐' },
]
const host = import.meta.env.VITE_BASE_API
const fileUrl = ref()
const activeId = ref(1)
const handleChangeTab = (item, index) => {
  activeId.value = item.id
  renderComponent.value = componentMap[item.id]
}
const data = reactive({
  keywords: [],
  detail: {
    file_name: '',
    file_id: '',
  },
  course_id: route.query.course_id,
  data_id: route.query.data_id,
})
const getFileExt = (filename) => {
  const name_arr = filename.split('.')
  if (name_arr.length <= 1) {
    return '._'
  } else {
    return '.' + name_arr[name_arr.length - 1]
  }
}

watch(
  () => route,
  async (newVal, oldVal) => {
    if (!route.query.data_id) return
    httpDataDetail({ document_id: route.query.data_id }).then((res: any) => {
      if (res && res.list && res.list.length > 0) {
        let rows = res.list[0]
        data.detail = rows
        console.log('rows.filename', rows)
        ext.value = getFileExt(rows.file_id)
        fileUrl.value =
          host + `/file/download?file_id=${rows.file_id}&preview=1`
      }
    })

    httpKeywords({
      document_id: route.query.data_id,
      limit: 6,
    }).then((res: any) => {
      data.keywords = res.keywords
    })
  },
  { immediate: true },
)
</script>
<style scoped lang="scss">
.data-wrapper {
  height: 100%;
  .header {
    height: 40px;
  }
  .data-container {
    min-width: 1400px;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    .data-view {
      height: 100%;
      min-width: 300px;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      padding: 10px;
    }
    .data-tab {
      flex: 1;
      height: 100%;
      min-width: 600px;
      .tab-wrapper {
        height: 40px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .tab-item {
          height: 100%;
          background-color: var(--el-color-primary-light-9);
          font-size: 14px;
          padding: 6px 30px;
          border-right: 2px solid #fff;
          color: #000;
          cursor: pointer;
          &:hover {
            color: #fff;
            transition: color 0.2s;
            background-color: var(--el-color-primary-light-5);
          }
        }
        .active {
          color: #fff;
          background-color: var(--el-color-primary);
        }
      }
      .render-component {
        height: calc(100% - 40px);
        width: 100%;
        min-width: 600px;
        overflow: hidden;
        padding: 10px;
        .ai-chat {
          height: 100%;
          width: 100%;
          position: relative;
          overflow: auto;
        }
      }
    }
  }
}
</style>
